// 该页面为博客详情页面，已归类到 blog 目录
<script setup lang="ts">
  import { MdCatalog, MdPreview } from 'md-editor-v3'
  import { computed, onMounted, ref } from 'vue'
  import { useRoute } from 'vue-router'
  import { get } from '@/api/blog.ts'
  import { Blog } from '@/types'

  const route = useRoute()
  const blog = ref<Blog>({
    id: '',
    title: '',
    categories: [],
    mkContent: '',
    categoryId: '',
    topFlag: 0,
    status: 0,
  })
  onMounted(() => {
    const id = route.query.id as string
    get({ id })
      .then(res => {
        blog.value = res
      })
      .catch(err => {
        goBack()
        throw err
      })
  })

  const backgroundImageUrl = computed(() => {
    if (blog.value.backgroundImg) {
      // 如果是完整URL则直接返回，否则拼接路径
      return blog.value.backgroundImg.startsWith('http')
        ? blog.value.backgroundImg
        : `/api/file/${blog.value.backgroundImg}`
    }
    return ''
  })

  const { scrollElement, clickCatalog, goBack } = useBlogView()

  function useBlogView() {
    const scrollElement = document.documentElement

    const clickCatalog = (_e: MouseEvent, t: { text: string }) => {
      history.replaceState({}, '', `${location.pathname}#${t.text}`)
    }
    const goBack = () => {
      window.close()
    }
    return { scrollElement, clickCatalog, goBack }
  }
</script>

<template>
  <el-card>
    <template #header>
      <el-page-header @back="goBack" />
      <el-backtop :right="150" :bottom="100" />
    </template>

    <!-- 背景图 -->
    <div v-if="blog.backgroundImg" class="background-image-container">
      <img :src="backgroundImageUrl" class="background-image" :alt="blog.title" />
    </div>

    <div class="title-container">
      <h1 class="centered-title">{{ blog.title }}</h1>
      <div class="blog-breadcrumb-div">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item v-for="item in blog.categories" :key="item.id">
            {{ item.name }}
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="blog-tag-div">
        <el-tag v-for="tag in blog.tags" :key="tag.id" type="info">
          {{ tag.name }}
        </el-tag>
      </div>
    </div>

    <div class="el-card-content">
      <div>
        <MdPreview
          editor-id="blog-view"
          code-theme="stackoverflow"
          preview-theme="github"
          :model-value="blog.mkContent"
        />
      </div>
      <div>
        <MdCatalog editor-id="blog-view" :scroll-element="scrollElement" @on-click="clickCatalog" />
      </div>
    </div>
  </el-card>
</template>

<style scoped>
  .centered-title {
    text-align: center; /* 文本居中 */
    font-size: 24px; /* 设置标题字体大小 */
    font-weight: bold; /* 设置标题粗体 */
    color: #333; /* 设置标题颜色 */
    margin: 10px; /* 设置标题与上方内容的间距 */
  }

  .blog-tag-div {
    display: flex;
    margin-top: 20px;
    margin-left: 25px;
  }

  /*noinspection CssUnusedSymbol*/
  .blog-tag-div .el-tag {
    margin-right: 18px;
    height: 27px;
    padding: 0 16px;
    font-size: 0.8rem;
  }

  .blog-breadcrumb-div {
    margin-left: 20px;
  }

  .el-card-content > :first-child {
    display: inline-flex;
    width: 80%;
  }

  .el-card-content > :last-child {
    display: inline-flex;
    position: fixed;
    width: 20%; /* 设置 .el-card-content的最后一个子元素的宽度为20% */
  }

  /*noinspection CssUnusedSymbol*/
  .el-card.is-always-shadow {
    margin: 20px;
  }

  .title-container {
    padding: 20px;
  }

  .background-image-container {
    width: 100%;
    height: 300px;
    overflow: hidden;
    margin-bottom: 20px;
    border-radius: 8px;
  }

  .background-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
  }

  .background-image:hover {
    transform: scale(1.05);
  }
</style>
